<template>
  <div class="tabs-box flex">
    <span
      v-for="(item, index) of tabsList"
      :key="index"
      :class="index === tabsIndex ? 'active-tab': 'disactive-tab'"
      class="cursor-p v-align-c tab-item font-16"
      @click="changeTabs(index)"
    >
      {{ item }}
    </span>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const tabsList:string[] = ['抖音商品', '快手商品', '亚马逊商品']
    const tabsIndex = ref(0)
    const changeTabs = (index:number):void => {
      tabsIndex.value = index
    }
    return {
      tabsList,
      tabsIndex,
      changeTabs
    }
  }
})
</script>

<style lang="scss" scoped>
.tabs-box {
  height: 61px;
  border-bottom: 1px solid #F5F6FA;
  box-sizing: border-box;
  & > span {
    position: relative;
    height: 100%;
    padding-left: 15px;
    padding-right: 17px;
    margin-left: 27px;
  }
  .active-tab {
    color: #182245;
    &::after {
      content: '';
      display: block;
      position: absolute;
      width: 100%;
      border-bottom: 3px solid #0C213F;
      bottom: -1.5px;
      left: 0;
    }
  }
  .disactive-tab {
    color: #999999;
  }
}
</style>
